<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-12-02 10:56:50
 * @LastEditors: mxy
 * @LastEditTime: 2022-12-04 20:09:14
-->
<template>
  <div class="app-container">
    <div>
      <button @click="comName = 'MyLeft'">显示Left</button>
      <button @click="comName = 'MyRight'">显示Right</button>
    </div>
    <!-- 使用 component 标签，可以动态的加载组件 -->
    <!-- <component :is="组件名"></component> -->
    <!-- 通过 给 keep-alive 加 include属性，来指定缓存哪些组件 -->
    <!-- 坑点：如果需要缓存多个组件，多个组件用逗号分割，绝对不能加空格 -->
    <keep-alive include="MyRight">
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from "@/components/MyLeft.vue";
import MyRight from "@/components/MyRight.vue";
export default {
  data() {
    return {
      comName: "MyLeft",
    };
  },
  components: {
    MyLeft,
    MyRight,
  },
};
</script>
